<template>
	<view>
		<view class="goods-swiper">
			<swiper class="goods-swiper-view" :autoplay="true" :circular="true" v-if="goods.banner && goods.banner.length != 0">
				<swiper-item v-for="(item, index) in goods.banner" :key="index"><image :src="item" class="banner-img" mode="aspectFill" :lazy-load="true"></image></swiper-item>
			</swiper>
			<image :src="goods.img" class="banner-img" v-else mode="aspectFill" :lazy-load="true"></image>
		</view>

		<view class="goods-detail-view">
			<view class="goods-detail-title flex-row-between">
				<text>{{ goods.name }}</text>
				<view class="goumai">{{ goods.buynum }}人已购买</view>
			</view>
			<view class="goods-sign-view flex-row-center" style="padding: 15rpx 0px;">
				<view class="goods-sign-item">正品保障</view>
				<view class="goods-sign-item sign-chaoshi">超时赔付</view>
			</view>
			<view class="goods-price-view flex-row-between">
				<view class="goods-price flex-row-center">
					￥
					<text>{{ goods.price }}</text>
				</view>
			</view>
		</view>

		<view class="spec-box">
			<view class="spec-box-item flex-row-center">
				<view class="spec-title">选择规格</view>
				<view class="spec-value" @click="onBuy">
					<text class="spec-choose">请选择</text>
					<text></text>
				</view>
				<u-icon size="14" color="#999" name="arrow-right"></u-icon>
			</view>

			<view class="spec-box-item flex-row-center">
				<view class="spec-title">商品运费</view>
				<view class="spec-value"><text>以订单页面实际支付金额为准</text></view>
				<u-icon size="14" color="#999" name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="detail-title flex-center">商品详情</view>
		<view class="img-detail-view"><image :src="item" mode="widthFix" v-for="(item, index) in goods.details" :key="index"></image></view>

		<view style="height: 100rpx"></view>

		<view class="bottom-view flex-row-between">
			<view class="bottom-icon-view flex-row-between">
				<view class="bottom-icon-item" @click="$navTo('pages/shop/shop')">
					<image :src="$getImgUrl('home/ic_sy.png')" mode="widthFix"></image>
					<view class="bottom-text">首页</view>
				</view>
				<button open-type="contact" class="share-btn">
					<view class="bottom-icon-item">
						<image :src="$getImgUrl('home/ic_kf.png')" mode="widthFix"></image>
						<view class="bottom-text">客服</view>
					</view>
				</button>
				<button open-type="share" class="share-btn">
					<view class="bottom-icon-item">
						<image :src="$getImgUrl('home/ic_fx.png')" mode="widthFix"></image>
						<view class="bottom-text">分享</view>
					</view>
				</button>
			</view>
			<view class="bottom-btn flex-center" @click="onBuy(2)">积分兑换</view>
			<view class="bottom-btn flex-center buy-btn" @click="onBuy(1)">立即购买</view>
		</view>

		<!-- 数量操作 -->
		<uni-popup ref="buy" type="bottom">
			<view class="spec-view">
				<view class="close-view flex-row"><image :src="$getImgUrl('home/ic_gb1.png')" mode="widthFix" @click="onBuyClose"></image></view>

				<view class="spec-view-goods flex-row">
					<image :src="goods.img" mode="aspectFill"></image>
					<view class="goods-right-info flex-col">
						<view class="spec-view-goods-title ellipsis-2">{{ goods.name }}</view>
						<view class="goods-price-view flex-row-between">
							<view class="goods-price flex-row-center" v-if="payType == 2">
								积分
								<text>{{ goods.specScore }}</text>
							</view>

							<view class="goods-price" v-else>
								￥
								<text>{{ goods.specPrice }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="line"></view>

				<view class="spec-view-num" v-for="(item, index) in goods.specs" :key="index">
					<text>{{ item.type }}</text>
					<view class="spec-list flex-row-center">
						<view
							class="spec-item flex-center"
							:class="{ 'spec-active': cell.id == item.active }"
							@click="onSpecClick(cell, i, index)"
							v-for="(cell, i) in item.data"
							:key="i"
						>
							{{ cell.name }}
						</view>
					</view>
				</view>

				<view class="spec-view-num flex-row-center">
					<text>购买数量</text>
					<view class="num-view flex-row-center">
						<view class="opt-view" @click="onNumChange('jian')">-</view>
						<view class="num">{{ goods.num }}</view>
						<view class="opt-view" @click="onNumChange('jia')">+</view>
					</view>
				</view>

				<view class="flex-row-between btn-view">
					<button type="default" class="default-btn" @click="onConfirmBuy(2)" v-if="payType == 2">确认兑换</button>
					<button type="default" class="default-btn" @click="onConfirmBuy(1)" v-else>确认购买</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script src="./detail.js"></script>

<style lang="scss" scoped>
@import '@/style/common.scss';
@import '../shop.scss';
@import './detail.scss';
</style>
